<template>
	<view>
		<view class=" uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view style="display: flex;justify-content: center;">
			<view class="a">
				<!-- 标题 -->
				<view class="label">维修方式：</view>

				<!-- 下拉框 -->
				<picker class="dropdown" mode="selector" :range="repairOptions" @change="onPickerChange">
					<view class="dropdown-text">{{ selectedOption }}</view>
				</picker>

				<view class="a2">
					<!-- <image src="../../../../static/rili.png" class="a21"></image> -->
					<view class="example-body" style="width: 50rpx;overflow: hidden;">
						<uni-datetime-picker :border="false" v-model="datetimerange" type="datetimerange"
							rangeSeparator="至" />
					</view>
					<text class="a22">预约日期</text>
				</view>

			</view>
		</view>

		<view class="content">
			<view v-if="current === 0">
				<text class="content-text">
					<view  class="dd">
						<view v-for="(item,index) in maintainList " :key="index">
							<view  class="c">
								<view class="c1">
									<text class="label1">维修单号：</text>
									<text class="value">{{item.number}}</text>
								</view>
								<view class="c1">
									<text class="label1">维修方式：</text>
									<text class="value">{{repairOptions[item.type]}}</text>
								</view>
								<view class="c1">
									<text class="label1">预约日期：</text>
									<text class="value">{{item.subscribeTime}}</text>
								</view>
							</view>
						</view>
					</view>
				</text>
			</view>

		</view>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				datetimerange: [],
				repairOptions: ["全部", "到店维修", "上门取车"], // 下拉框选项
				selectedOption: "全部", // 默认选项
				items: ['进行中', '已完成'],
				// colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: 'white',
				styleType: 'default',
				maintainList: [],
				maintainData: {
					type: '',
					maintainState: ''
				}


			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					this.maintainData = {
						maintainState: e.currentIndex
					}
				}
				this.getList()
			},
			// 下拉框选中事件
			onPickerChange(e) {
				this.selectedOption = this.repairOptions[e.detail.value];
				if (e.detail.value != 0) {
					this.maintainData = {
						type: e.detail.value
					}
					this.getList()
				} else {
					this.maintainData = {
						type: ''
					}
					}

				},
				getList() {
					let that = this
					this.$http({
						url: '/api/repair/maintain/list',
						method: 'get',
						data: that.maintainData,
						success(res) {
							that.maintainList = res.data.rows
						}
					})
				}
			}

		}
</script>

<style lang="scss">
	// 日期
	.example-body {
		background-color: #fff;
		padding: 10px;

	}

	.dd {
		display: flex;
		flex-direction: column;
		/* 设置子元素垂直排列 */
		margin-top: 20rpx;


	}

	/* 容器样式 */
	.c {
		padding: 20rpx;
		background-color: white;
		width: 680rpx;
		height: 200rpx;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		margin-bottom: 20rpx;
	}

	/* 每一行内容的样式 */
	.c1 {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		/* 增加行间距 */
	}

	/* 标签部分字体（冒号前的部分） */
	.label1 {
		font-size: 14px;
		font-weight: bold;
		color: #000;
		/* 设置为黑色 */
		margin-right: 10rpx;
		margin-left: 20rpx;
	}

	/* 值部分的字体样式 */
	.value {
		font-size: 14px;
		color: #333;
		/* 值部分的字体颜色 */
	}

	// .c1{
	// 	display: flex;
	// 	text-align: left;
	// 	margin-left: 20rpx;
	// 	// padding-top: 10rpx;
	// 	box-sizing: border-box;
	// }



	/* 标签文字样式 */
	.label {
		font-size: 14px;
		color: #333;
		margin-right: 10px;
	}

	/* 下拉框样式 */
	.dropdown {
		// flex: 1; 
		width: 120rpx;
		margin-right: 80px;
		background-color: #007aff;
		border-radius: 6px;
		padding: 4px 12px;
	}

	.dropdown-text {
		font-size: 14px;
		color: #f5f5f5;
	}

	.a {
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 10px 15px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		width: 650rpx;
		height: 100rpx;
		margin-top: -170rpx;
	}

	.a21 {
		margin-right: 6rpx;
	}

	.a2 {
		display: flex;
		align-items: center;
	}

	.a2 image {
		width: 40rpx;
		height: 40rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		// margin-top: 30px;
		padding-top: 20rpx;
		background-color: #2E80FA;
		height: 260rpx;
		width: 100%;

	}



	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		
		text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}
</style>